@import "../../style/public";
%ul-list {
  background: #fff;
  @include thin-border(true);
  > li {
    @include thin-border(false, false, top);
    @include remCalc(font-size, 32);
    @include remCalc(padding, 22, 30, 22, 0);
    @include remCalc(margin, 0, 0, 0, 30);
    display: flex;
    align-items: flex-start;
    &:first-child {
      &::after {
        display: none;
      }
    }
    > span {
      @include remCalc(font-size, 32);
      color: #333;
      @include remCalc(padding-right, 30);
      display: inline-flex;
      i {
        @include remCalc(padding-right, 28);
        @include remCalc(font-size, 48);
        color: $color-blue;
      }
    }
    > div {
      word-break: break-all;
      flex: 1;
      text-align: right;
      color: #999;
      .zhk-list_rarrow {
        @include remCalc(font-size, 32);
        color: #ccc;
      }
      -webkit-user-select: text;
    }
  }
}
.network-setting {
  .qrCode {
    .qr-top {
      background: #fff;
      @include remCalc(padding, 40, 0);
      @include thin-border(false, false, bottom);
      .title {
        color: #333;
        @include remCalc(font-size, 32);
        @include remCalc(padding, 0, 0, 40, 0);
        text-align: center;
      }
      .code-wrap {
        display: flex;
        justify-content: center;
      }
    }
    .help-tips {
      color: #999;
      @include remCalc(font-size, 24);
      @include remCalc(padding, 40, 30, 20, 30);
    }
    .img-wrap {
      @include remCalc(padding, 0, 30);
      img {
        border-radius: 4px;
        border: 1px solid #ddd;
        width: 100%;
        display: block;
        height: auto;
      }
    }
  }
  .top-tip {
    background: #fdfcec;
    @include remCalc(padding, 0, 30);
    @include remCalc(height, 60);
    @include remCalc(line-height, 60);
    color: #f87c36;
    @include remCalc(font-size, 24);
  }
  .positionHide {
    position: absolute;
    left: -9999px;
  }
  .tip-wrap {
    @include remCalc(margin, 60, 0, 0, 0);
    text-align: center;
  }
  .tip {
    display: inline-block;
    text-align: left;
    margin: auto;
    @include remCalc(font-size, 24);
    color: #999;
  }
  .broadcast {
    text-align: center;
    .bg {
      @include remCalc(padding, 20);
      position: relative;
      .pic {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 991;
        background: url(../../../static/images/network_broadcast.png) center no-repeat;
        @include remCalc(background-size, 488, 291);
      }
      .circles {
        position: relative;
        @include remCalc(height, 600);
        li {
          background: #0193fd;
          border-radius: 100%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate3d(-50%, -50%, 0);
        }
        li:first-child {
          opacity: 0.05;
          @include remCalc(width, 600);
          @include remCalc(height, 600);
        }
        li:nth-child(2) {
          opacity: 0.1;
          @include remCalc(width, 480);
          @include remCalc(height, 480);
        }
        li:last-child {
          opacity: 0.15;
          @include remCalc(width, 360);
          @include remCalc(height, 360);
        }
      }
    }
    .title {
      @include remCalc(margin, -50, 0, 20, 0);
      @include remCalc(font-size, 40);
      color: #333;
    }
    .content {
      @include remCalc(font-size, 32);
      color: #666;
      @include remCalc(margin, -0, 0, 80, 0);
    }
  }
  .zhk-list_rarrow {
    &.down {
      &::before {
        display: inline-block;
        transform: rotate(90deg);
      }
    }
  }
  .btn-wrap {
    @include remCalc(margin-top, 60);
  }
  .top {
    @include remCalc(height, 268);
    text-align: center;
    i {
      color: #ddd;
      display: block;
      @include remCalc(font-size, 140);
      @include remCalc(margin, 60, 0, 20, 0);
    }
    div {
      color: #333;
      @include remCalc(font-size, 32);
    }
  }
  .ul-list {
    @extend %ul-list;
  }
}
.binding-store {
  .img-mxs {
    width: 100%;
    @include remCalc(height, 440);
    background: url(../../../static/images/bind_store.png) 0 0 no-repeat;
    background-size: contain;
    @include remCalc(margin-bottom, 20);
    @include thin-border(true);
  }
  .img-mxs2 {
    @extend .img-mxs;
    background: url(../../../static/images/bind_store_mxs2.png) 0 0 no-repeat;
    background-size: contain;
  }
  .img-kxh {
    width: 100%;
    @include remCalc(height, 440);

    @include remCalc(margin-bottom, 20);
    @include thin-border(true);
    position: relative;
    .img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      @include remCalc(left, 270);
      @include remCalc(width, 208);
      @include remCalc(height, 400);
      background: #f4f7fa url(../../../static/images/kxh_bindStore.png) 0 0 no-repeat;
      background-size: contain;
    }
  }
  .img-mkl {
    width: 100%;
    @include remCalc(height, 440);
    background: url(../../../static/images/mkl_bind_store.png) center no-repeat;
    @include remCalc(background-size, 468, 292);
    @include remCalc(margin-bottom, 20);
    @include thin-border(true);
    color: #999;
    span {
      @include remCalc(font-size, 24);
    }
    div {
      @include remCalc(font-size, 10);
    }
  }
  .ul-list {
    @extend %ul-list;
  }
  .tip {
    @include remCalc(padding, 20, 30);
    @include remCalc(font-size, 24);
    @include remCalc(line-height, 40);
    color: #999;
  }
}
.auth-none {
  .top {
    background: #fff;
    @include remCalc(height, 440);
    @include remCalc(margin-bottom, 60);
    @include thin-border(true);
    text-align: center;
    i {
      display: block;
      @include remCalc(font-size, 128);
      @include remCalc(padding, 60, 0, 20, 0);
      background: linear-gradient(247deg, #ff9400 0%, #fd6534 100%);
      -webkit-background-clip: text;
      color: transparent;
    }
    .title {
      @include remCalc(font-size, 32);
      @include remCalc(line-height, 50);
      color: #333333;
    }
    .content {
      display: inline-flex;
      justify-content: center;
      flex-direction: column;
      text-align: left;
      @include remCalc(padding-top, 60);
      @include remCalc(font-size, 24);
      @include remCalc(line-height, 40);
      color: #999;
    }
  }
}
.mkl-offline {
  @extend .auth-none;
  // i {
  //   display: block;
  //   @include remCalc(font-size, 128);
  //   @include remCalc(padding, 60, 0, 20, 0);
  //   background: transparent !important;
  //   color: #ddd !important;
  //   -webkit-background-clip: initial !important;
  // }
  .top.sblx {
    box-sizing: border-box;
    background: url(../../../static/images/offline_guide.png);
    background-size: cover;
    @include remCalc(padding-top, 200);
  }
}
.mkl-unbind {
  @extend .auth-none;
}
.mkl-timeout {
  @extend .auth-none;
}
.mkl-unopen {
  @extend .auth-none;
  .ignore {
    @include remCalc(margin-top, 40);
    @include remCalc(padding, 20, 0);
    @include remCalc(font-size, 32);
    color: #459dff;
    text-align: center;
  }
}
.main-settings {
  .update-device-name {
    @include remCalc(padding, 30);
    text-align: center;
    .device-name {
      border: 1px solid $color-border;
      overflow: hidden;
      @include remCalc(padding, 10);
      box-sizing: border-box;
    }
    .title {
      @include remCalc(font-size, 32);
      @include remCalc(padding, 30);
    }
    input {
      @include remCalc(height, 60);
      @include remCalc(padding, 0, 10);
      box-sizing: border-box;
      width: 100%;
      border: 1px solid #ddd;
      -webkit-appearance: none;
    }
    .tip {
      @include remCalc(font-size, 24);
      color: #999;
    }
  }
  .zhk-sxan {
    display: inline-block;
  }
  .refreshing {
    opacity: 0.5;
    animation: loadingCircle 1s infinite linear;
  }
  .ul-list {
    @extend %ul-list;
    & + .ul-list {
      @include remCalc(margin-top, 20);
    }
  }
  .top {
    @include remCalc(margin-bottom, 20);
    background: #fff;

    .bg {
      .status-text.init {
        position: absolute;
        z-index: 88;
        left: 50%;
        transform: translateX(-50%);
        @include remCalc(top, 360);
        background: url(../../../static/images/add-more.gif) center left no-repeat;
        @include remCalc(background-size, 36);
        @include remCalc(padding-left, 64);
        @include remCalc(font-size, 28);
        color: #333;
      }
      .status-text.online {
        position: absolute;
        z-index: 88;
        left: 50%;
        transform: translateX(-50%);
        @include remCalc(top, 360);
        @include remCalc(font-size, 28);
        color: #333;
      }
      .status-text.offline {
        position: absolute;
        z-index: 88;
        left: 50%;
        transform: translateX(-50%);
        @include remCalc(top, 360);
        @include remCalc(font-size, 28);
        color: #333;
      }
      .status-text {
        display: flex;
        align-items: center;
        i {
          display: inline-block;
          @include remCalc(font-size, 32);
          @include remCalc(padding, 4, 12, 4, 0);
          &.zhk-yxzc {
            background: linear-gradient(247deg, #17c267 0%, #0bdb6c 100%);
            -webkit-background-clip: text;
            color: transparent;
          }
          &.zhk-sbylx {
            background: linear-gradient(247deg, #ff9400 0%, #fd6534 100%);
            -webkit-background-clip: text;
            color: transparent;
          }
        }
      }
      &.init {
        .xhtb-list {
          .zhk-xhtb {
            color: #0193fd;
          }
        }
        .circles {
          li {
            background: #0193fd;
          }
        }
        .equi {
          background: url(../../../static/images/mxs_init.png) 0 0 no-repeat;
          background-size: cover;
        }
        .equi2 {
          background: url(../../../static/images/mxs2_init.png) 0 0 no-repeat;
          background-size: cover;
        }
        .equi3 {
          background: url(../../../static/images/mxs3_init.png) 0 0 no-repeat;
          background-size: cover;
        }
      }
      &.online {
        .xhtb-list {
          .zhk-xhtb {
            color: #17c267;
          }
        }
        .circles {
          li {
            background: #17c267;
          }
        }
        .equi {
          background: url(../../../static/images/mxs_online.png) 0 0 no-repeat;
          background-size: cover;
        }
        .equi2 {
          background: url(../../../static/images/mxs2_online.png) 0 0 no-repeat;
          background-size: cover;
        }
        .equi3 {
          background: url(../../../static/images/mxs3_online.png) 0 0 no-repeat;
          background-size: cover;
        }
      }
      &.offline {
        .xhtb-list {
          .zhk-xhtb {
            color: #ff9400;
          }
        }
        .circles {
          li {
            background: #ff9400;
          }
        }
        .equi {
          background: url(../../../static/images/mxs_offline.png) 0 0 no-repeat;
          background-size: cover;
        }
        .equi2 {
          background: url(../../../static/images/mxs2_offline.png) 0 0 no-repeat;
          background-size: cover;
        }
        .equi3 {
          background: url(../../../static/images/mxs3_offline.png) 0 0 no-repeat;
          background-size: cover;
        }
      }
      @include remCalc(height, 440);
      overflow: hidden;
      position: relative;
      .device-name {
        text-align: center;
        @include remCalc(padding-top, 40);
        @include remCalc(font-size, 28);
        color: #333;
      }
      .xhtb-list {
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-sizing: border-box;
        @include remCalc(padding, 0, 60);
        display: flex;
        justify-content: space-between;
        .zhk-xhtb {
          color: #ff9400;
          @include remCalc(font-size, 110);
        }
      }
      .equi {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        z-index: 4;
        @include remCalc(width, 248);
        @include remCalc(height, 202);
      }
      .equi2 {
        @extend .equi;
        @include remCalc(width, 229);
        @include remCalc(height, 170);
      }
      .equi3 {
        @extend .equi;
        @include remCalc(width, 300);
        @include remCalc(height, 163);
      }
      .eq {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        z-index: 4;
        text-align: center;
        @include remCalc(width, 302);
        @include remCalc(height, 230);

        // border: 1px solid #ddd;
        // @include remCalc(width, 296);
        // @include remCalc(height, 222);
        // @include remCalc(padding, 11, 11, 25, 11);
        // @include remCalc(border-radius, 16);
        // background: #f5f6f8;
        // box-sizing: border-box;
        &.kxh {
          @include remCalc(width, 180);
          @include remCalc(height, 400);
          background: url(../../../static/images/kxh_mainSetting.png) 0 0 no-repeat;
          background-size: cover;
        }
        &.init {
          background: url(../../../static/images/mkl_init.png) 0 0 no-repeat;
          background-size: cover;
        }
        &.online {
          background: url(../../../static/images/mkl_online.png) 0 0 no-repeat;
          background-size: cover;
        }
        &.offline {
          background: url(../../../static/images/mkl_offline.png) 0 0 no-repeat;
          background-size: cover;
        }

        .inner {
          height: 100%;
          .init-loadding {
            @include remCalc(width, 80);
            @include remCalc(height, 80);
            background: url(../../../static/images/add-more.gif) center no-repeat;
            background-size: contain;
            @include remCalc(margin, 32, auto, 22, auto);
          }
          i {
            display: inline-block;
            @include remCalc(padding, 32, 0, 22, 0);
            @include remCalc(font-size, 80);
            &.zhk-yxzc {
              background: linear-gradient(247deg, #17c267 0%, #0bdb6c 100%);
              -webkit-background-clip: text;
              color: transparent;
            }
            &.zhk-sbylx {
              background: linear-gradient(247deg, #ff9400 0%, #fd6534 100%);
              -webkit-background-clip: text;
              color: transparent;
            }
          }
          p {
            @include remCalc(font-size, 28);
            color: #333333;
          }
        }
      }
      .circles {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        @include remCalc(width, 762);
        @include remCalc(height, 762);
        li {
          background: #ff9400;
          position: absolute;
          border-radius: 50%;
          top: 50%;
          left: 50%;
          transform: translate3d(-50%, -50%, 0);
          &:first-child {
            @include remCalc(width, 360);
            @include remCalc(height, 360);
            opacity: 0.15;
            z-index: 3;
          }
          &:nth-child(2) {
            @include remCalc(width, 610);
            @include remCalc(height, 610);
            opacity: 0.1;
            z-index: 2;
          }
          &:nth-child(3) {
            @include remCalc(width, 762);
            @include remCalc(height, 762);
            opacity: 0.05;
            z-index: 1;
          }
        }
      }
    }
    .shop-info {
      -webkit-user-select: text;
      @include thin-border(true);
      @include remCalc(padding, 20, 30);
      text-align: center;
      .shop-name {
        text-align: center;
        @include remCalc(font-size, 28);
        @include remCalc(line-height, 50);
        color: #333;
      }
      .shop-id {
        text-align: center;
        @include remCalc(font-size, 24);
        @include remCalc(line-height, 34);
        color: #999;
      }
    }
  }
}
.sound-settings {
  .device-info {
    padding: 10px 15px 10px 16px;
    @include remCalc(font-size, 32);
    background-color: #fff;
    .name {
      color: #333;
    }
    .sn {
      float: right;
      color: #999;
    }
  }
  .mt-switch-box {
    @include remCalc(width, 578);
    @include remCalc(margin, 30,0,30,56);
    position: relative;
    .mt-range {
    }
    .circles {
      position: absolute;
      width: 100%;
      @include remCalc(height, 18);
      @include remCalc(top, 16);
      z-index: 1;
      li {
        background: #fff;
        @include remCalc(width, 18);
        @include remCalc(height, 18);
        border: 2px solid #ddd;
        border-radius: 50%;
        position: absolute;
        &::after{
          content: ""; 
          $area:-30;
          position: absolute;
          @include remCalc(top, $area);
          @include remCalc(bottom, $area);
          @include remCalc(left, $area);
          @include remCalc(right, $area);
        }
        &:first-child {
          left: 0;
        }
        &:nth-child(2) {
          left: 50%;
          margin-left: -6px;
        }
        &:last-child {
          right: 6px;
        }
      }
    }
    .rang-text {
      position: absolute;
      width: 100%;
      @include remCalc(height, 18);
      z-index: 1;
      @include remCalc(top, 60);
      li {
        @include remCalc(font-size, 24);
        color: #333333;
        position: absolute;
        &:first-child {
          left: 0px;
        }
        &:nth-child(2) {
          left: 50%;
          margin-left: -14px;
        }
        &:last-child {
          right: 0;
        }
      }
    }
  }
  .ul-title {
    @include remCalc(padding, 0, 30);
    @include remCalc(font-size, 24);
    @include remCalc(line-height, 66);
    color: #999;
  }
  .no-flex{
    @include remCalc(font-size, 32);
    background: #fff;
    color: #333;
    @include thin-border(true,false);
    >li{
      height:auto !important;
      @include remCalc(padding, 20, 30,!important);
      display: block;
      >div{
        display: block !important;
      }
    }
   
  }
  .mg20{
    @include remCalc(margin, 0,0,20,0);
  }
  .ul-list {
    @extend %ul-list;
  
    > li {
      .mint-switch{
        @include remCalc(margin, -8,0);
      }
      @include remCalc(padding, 20, 30, 20, 0);
      line-height: 1.1;
      box-sizing: border-box;
      align-items: center;
      >span{
        flex-direction: column;
        .sub-text{
          line-height: 1.5;
          @include remCalc(padding, 12, 0, 0, 0);
          font-style: normal;
          @include remCalc(font-size, 24);
          color: #999;
        }
      }
      > div {
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
  .tip {
    @include remCalc(padding, 20, 30);
    @include remCalc(font-size, 24);
    @include remCalc(line-height, 40);
    color: #999;
  }
}
.ad-upload {
  .upload-wrap {
    @include remCalc(width, 690);
    @include remCalc(height, 384);
    @include remCalc(margin, 30, auto, 60, auto);
    background: url(../../../static/images/adbg.png) center no-repeat;
    background-size: cover;
    position: relative;
    .img-container {
      @include remCalc(width, 457);
      @include remCalc(height, 343);
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      z-index: 2;
      @include remCalc(left, 193);
      @include remCalc(top, 26);
      .default-ad {
        @include remCalc(width, 220);
        @include remCalc(height, 138);
        background: url(../../../static/images/btn_ad_upload.png) center no-repeat;
        background-size: cover;
      }
      img {
        &.width-bigger {
          width: 100%;
          height: auto;
        }
        &.height-bigger {
          height: 100%;
          width: auto;
        }
      }
    }
  }
}
